<template>
  <div class="">
    <div class="wrap">
      <ul class="nav">
        <li
          v-for="(item, index) in cate"
          :key="item.id"
          :class="{ active: flag == index }"
          @click="change(index, item.id)"
        >
          {{ item.name }}
        </li>
      </ul>
    </div>

    <van-loading v-show="show" type="spinner" />

    <ul class="con">
      <li v-for="item in list" :key="item.id" @click="gotodetail(item.id)">
        <img v-lazy="item.list_pic_url" alt="" />
        <h3>{{ item.name }}</h3>
        <button @click.stop="add(item)">添加购物车</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      cate: [],
      flag: 0,
      list: [],
      show: true,
    };
  },
  mounted() {
    this.getcate();
    this.change(0, "1005000");
  },
  methods: {
    getcate() {
      this.$axios
        .get("http://shop.bufantec.com/bufan/category/categoryNav?id=1005000")
        .then((res) => {
          console.log(res);
          this.cate = res.data.navData;
        });
    },
    change(index, id) {
      this.show = true;
      this.flag = index;
      this.$axios
        .get("http://shop.bufantec.com/bufan/goods/goodsList?categoryId=" + id)
        .then((res) => {
          console.log(res);
          this.list = res.data.data;
          this.show = false;
        });
    },
    //点击不同的分类请求不同的分类列表
    gotodetail(id) {
      this.$router.push({ path: "/detail", query: { id } });
    },
    add(item) {
      this.$store.commit("add", item);
    },
  },
  components: {},
};
</script>

<style lang="scss" scoped>
.wrap {
  width: 100%;
  overflow: scroll;
  .nav {
    display: flex;
    li {
      width: 80px;
      flex-shrink: 0;
      text-align: center;
      line-height: 50px;
      height: 50px;
    }
    .active {
      color: brown;
      border-bottom: 2px solid brown;
    }
  }
}
.con {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  li {
    width: 45%;
    border: 1px solid #ccc;
    img {
      width: 100%;
    }
  }
}
</style>
